<template>
  <div class="appendProperty" style="height: 100%">
    <el-tabs v-model="activeName"  type="card">
      <el-tab-pane label="附加资料" name="first">
      </el-tab-pane>
      <el-tab-pane label="所属功能" name="second"></el-tab-pane>
    </el-tabs>

    <div class="profile" v-if="activeName=='first'" style="height: 100%">
      <el-row style="height: 100%">
        <el-col :span="4" style="height: 100%;border-right: 1px solid #eee">
          <CommonTree label-name="所属功能"
                      :tree-props="treeProps" :data="treeData" @treeChange="treeChange"
                      node-key="Property_ID"></CommonTree>
        </el-col>
        <el-col :span="20">
          <CommonBtn  :label-name="functionName" :buttons="buttons" @onButtonClick="onButtonClick">
          </CommonBtn>
          <CommonList ref="list"
                      :columns="columns" :listUrl="listUrl" @tableSelect="tableSelect" :conditions="conditions"></CommonList>
        </el-col>
      </el-row>

      <edit-pop-up :out-btn="button" :props="add" :original-data="submit"
                   @closeDialog="button=null" :submit-url="$api.API_RMBASE_SYSTEM_SAVE_PROPERTY"
                   :edit-url="$api.API_RMBASE_SYSTEM_UPDATE_PROPERTY"
                   @refresh="refresh"></edit-pop-up>
    </div>

    <div class="function" v-if="activeName=='second'">
      <CommonBtn  :label-name="functionName" :buttons="buttons" @onButtonClick="onButtonClick">
      </CommonBtn>
      <CommonList ref="list"
                  :columns="columns1" :listUrl="listUrl" @tableSelect="tableSelect1" ></CommonList>

      <edit-pop-up :out-btn="button" :props="add1" :original-data="submit"
                   @closeDialog="button=null" :submit-url="$api.API_RMBASE_SYSTEM_SAVE_TOP_PROPERTY"
                   :edit-url="$api.API_RMBASE_SYSTEM_UPDATE_TOP_PROPERTY"
                    @refresh="refresh"></edit-pop-up>

      <EnsurePopUp :out-btn="button" @close="button =null" @refresh="refresh" :original-data="row"
                  :delete-url ="$api.API_RMBASE_SYSTEM_DELETE_PROPERTY"></EnsurePopUp>
    </div>
  </div>
</template>

<script>
  import CommonTree from "../../common/CommonTree";
  import CommonBtn from "../../common/CommonBtn";
  import CommonList from "../../common/CommonList";
  import EditPopUp from "../../common/EditPopUp";
  import EnsurePopUp from "../../common/EnsurePopUp";
  export default {
      data(){
          return{
              activeName:'first',
              treeProps: {
                  children: 'children',
                  label: 'Property_Function'
              },
              treeData:[],
              buttons:[
                  this.$config.BTNS.ADD,
                  this.$config.BTNS.EDIT,
                  this.$config.BTNS.DELETE
              ],
              columns:[
                  {
                      label:'属性名称',
                      prop:'Property_Name'
                  },
                  {
                      label:'控件ID',
                      prop:'Property_Control_ID'
                  },
                  {
                      label:'控件类型',
                      prop:'Property_Control_Style'
                  },
                  {
                      label:'控件样式',
                      prop:'Property_Control_Style'
                  },
                  {
                      label:'控件长度',
                      prop:'Property_Control_Length'
                  },
                  {
                      label:'显示顺序',
                      prop:'SortCode'
                  },
                  {
                      label:'对象资源',
                      prop:'Property_Control_DataSource'
                  },

              ],
              columns1:[
                  {
                      label:'所属功能',
                      prop:'Property_Function'
                  },
                  {
                      label:'功能路径',
                      prop:'Property_FunctionUrl'
                  },
                  {
                      label:'创建用户',
                      prop:'CreateUserName'
                  },
                  {
                      label:'创建时间',
                      prop:'CreateDate'
                  },
                  {
                      label:'修改用户',
                      prop:'ModifyUserName'
                  },
                  {
                      label:'修改时间',
                      prop:'ModifyDate'
                  },
              ],
              add1:{
                  title:'附加属性功能',
                  addItems:[
                      {name:'所属功能',prop:'function',type:'text',required:true},
                      {name:'功能路径',prop:'functionUrl',type:'text',required:true},
                  ],
              },
              add:{
                  title:'附加属性功能',
                  addItems:[
                      {name:'所属名称',prop:'propertyName',type:'text',required:true},
                      {name:'控件ID',prop:'propertyControlID',type:'text',required:true},
                      {name:'控件类型',prop:'propertyControlType',type:'select',required:true,dValue:1,
                          options:[
                              {label:'1-文本框',value:1},
                              {label:'2-下拉框',value:2},
                              {label:'3-日期框',value:3},
                              {label:'4-标  签',value:4},
                          ]
                      },
                      {name:'控件宽度',prop:'propertyControlLength',type:'text',required:true,dValue:'200'},
                      {name:'控件样式',prop:'propertyControlStyle',type:'select',required:true,dValue:'txt',
                          options:[
                              {label:'txt',value:'txt'},
                              {label:'select',value:'select'},
                          ]
                      },
                      {name:'表单验证',prop:'propertyControlValidator',type:'select',dValue:'',
                          options:[
                              {label:'允许为空',value:''},
                              {label:'NotNull - 不能为空',value:'NotNull'},
                              {label:'Num - 必须为数字',value:'Num'},
                              {label:'NumOrNull - 必须为数字',value:'NumOrNull'},
                              {label:'Phone - 必须电话格式！',value:'Phone'},
                              {label:'PhoneOrNull - 必须电话格式！',value:'PhoneOrNull'},
                              {label:'Mobile - 必须为手机格式！',value:'Mobile'},
                              {label:'MobileOrNull - 必须为手机格式！',value:'MobileOrNull'},
                              {label:'必须为电话格式或手机格式！',value:'MobileOrPhoneOrNull'},
                              {label:'Email - 必须为E-mail格式！',value:'Email'},
                              {label:'EmailOrNull - 必须为E-mail格式！',value:'EmailOrNull'},
                              {label:'Date - 必须为日期格式！',value:'Date'},
                              {label:'DateOrNull - 必须为日期格式！',value:'DateOrNull'},
                              {label:'IDCard - 必须为身份证格式！',value:'IDCard'},
                              {label:'IDCardOrNull - 必须为身份证格式！',value:'IDCardOrNull'},
                              {label:'Double - 必须为小数！',value:'Double'},
                              {label:'DoubleOrNull - 必须为小数！',value:'DoubleOrNull'},
                          ]
                      },
                      {name:'最大长度',prop:'propertyControlMaxlength',type:'text',required:true},
                      {name:'合并列',prop:'propertyColspan',type:'text',required:true},
                      {name:'显示顺序',prop:'sortCode',type:'text',required:true},
                      {name:'控件事件',prop:'propertyEvent',type:'textarea'},
                      {name:'数据来源',prop:'propertyControlDataSource',type:'textarea'},
                  ],
              },
              listUrl:this.$api.API_RMBASE_SYSTEM_PROPERTY,
              conditions:[],
              row:null,
              row1:null,
              button:null,
              treeSelect:null,
              functionName:'用户附加信息',
              submit:{}
          }
      },
      methods:{
          initData() {
              this.$http.get(this.$api.API_RMBASE_SYSTEM_PROPERTY).then(resp=>{
                  this.treeData = resp
                  if (resp.length>0) {
                      this.treeSelect = resp[0]
                  }
              },msg=>{})
          },
          onButtonClick(item) {
              if (item.event == 'edit()'|| item.event == 'Delete()') {
                  if (this.activeName == 'first') {
                      if (!this.row || JSON.stringify(this.row) == '{}') {
                          this.$message.error("请选择一行数据")
                          return
                      }
                      this.submit = this.row
                  } else {
                      if (!this.row1 || JSON.stringify(this.row1) == '{}') {
                          this.$message.error("请选择一行数据")
                          return
                      }
                      this.submit = this.row1
                  }

              }
              if (item.event == 'add()') {
                  this.submit = {propertyFunction:this.functionName}
              }
              this.button = item
          },
          tableSelect(item) {
              this.$set(item,"propertyId",item.Property_ID)
              this.$set(item,"propertyName",item.Property_Name)
              this.$set(item,"propertyControlID",item.Property_Control_ID)
              this.$set(item,"propertyControlType",item.Property_Control_Type)
              this.$set(item,"propertyControlLength",item.Property_Control_Length)
              this.$set(item,"propertyControlStyle",item.Property_Control_Style)
              this.$set(item,"propertyControlValidator",item.Property_Control_Validator)
              this.$set(item,"propertyControlMaxlength",item.Property_Control_Maxlength)
              this.$set(item,"propertyColspan",item.Property_Colspan)
              this.$set(item,"sortCode",item.SortCode)
              this.$set(item,"propertyEvent",item.Property_Event)
              this.$set(item,"propertyControlDataSource",item.Property_Control_DataSource)
              this.$set(item,"propertyFunction",item.Property_Function)
              this.row = item
          },
          tableSelect1(item) {
              this.$set(item,"propertyId",item.Property_ID)
              this.$set(item,"functionUrl",item.Property_FunctionUrl)
              this.$set(item,"function",item.Property_Function)
              this.row1 = item
          },
          treeChange(item) {
              this.functionName = item.Property_Function
              this.conditions = []
              this.conditions.push({prop:'function',value:this.functionName,checked:true})
              this.$nextTick(()=>{
                  this.$refs.list.search()
              })
          },
          refresh() {
              this.$refs.list.search()
          }
      },
      created() {
          this.initData()
          this.conditions = []
          this.conditions.push({prop:'function',value:'用户附加信息',checked:true})
      },
      components:{CommonTree,CommonBtn,CommonList,EditPopUp,EnsurePopUp}
  }
</script>

<style lang="less" scoped>
  /deep/.el-tabs__header{
    margin: 0 !important;
  }

</style>
